/* Companion to everyday_miracles/css/testemonial-widget.css, which does the
   real styling -- the prayer-request cards use that widget's own classes
   (.rt-card, .rt-card__quote, .rt-card__meta, .rt-nav, ...) so the two
   widgets share one look and can't drift apart. Load BOTH stylesheets:
   testemonial-widget.css first, then this one.

   Only the wall variant lives here, since the testimonials widget is
   carousel-only and has nothing equivalent. */

/* Applies to both variants -- they both carry .rt-prayer-requests. The
   width:auto is what makes the margin work: the shared stylesheet sets
   .rt-testimonials to width:100%, and 100% plus 100px of margin would
   overflow the page rather than inset the widget. */
.rt-prayer-requests {
  width: auto;
  max-width: 100%;
  margin-left: 50px;
  margin-right: 50px;
}

/* Why the carousel made the whole page scroll sideways on a phone.

   The hero that hosts it is a flex container:

     .bg-prayersection { display: flex; align-items: center; }   (home2.css)

   and the <section> holding this widget is one of its flex items. A flex
   item defaults to min-width:auto, meaning it refuses to shrink below its
   own MIN-CONTENT width -- and min-content here is measured through
   .swiper-wrapper, a flex row of fixed 340px slides that do not shrink
   (flex-shrink: 0). Two dozen of those plus Swiper's loop clones is a
   min-content width of several thousand pixels, so the section inflated
   past the viewport and took the page's horizontal scrollbar with it. The
   overflow:hidden on .rt-swiper does not prevent this: it clips what is
   PAINTED, it does not stop the content's intrinsic width from propagating
   up to an ancestor that is asking how narrow it may be.

   inline-size containment is the fix from inside our own subtree: it makes
   this element size as though it had no contents in the inline axis, so the
   slide row can no longer inflate anything above it. The width Swiper
   measures is unaffected -- that comes from the parent, not the contents.

   Needs Safari 16 / Chrome 105. On anything older the behaviour is what it
   already is today, no worse. The canonical fix is `min-width: 0` on that
   <section>, but that element belongs to the CMS layout stylesheet, not to
   this widget. */
.rt-prayer-requests .rt-swiper {
  contain: inline-size;
  /* A horizontal drag belongs to the carousel; only vertical panning is the
     page's. Without this, iOS can scroll the page sideways mid-swipe even
     once the width above is contained. */
  touch-action: pan-y;
}

/* Month filter above the wall. Inherits the host site's font; only the
   spacing and a readable control size are set here. Margin moved to
   .rt-pr-toprow below, which now wraps this together with the info box --
   two margins on adjacent flex children would not collapse the way block
   margins do, so keeping it here too would double the gap under the row. */
.rt-pr-filter {
  display: flex;
  justify-content: flex-end;
}
.rt-pr-filter__select {
  font: inherit;
  font-size: 0.95em;
  padding: 0.45em 0.7em;
  color: var(--black, #000);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: pointer;
}

.rt-pr-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

/* .rt-card__quote-mark is absolutely positioned. In the carousel its
   containing block is the Swiper slide; the wall has no slides, so without
   this every card's mark would escape and stack on the grid itself. */
.rt-pr-wall .rt-card {
  position: relative;
}

/* Per-consent styling hooks. Every card carries one of these alongside
   .rt-card, so each kind of consent can be styled independently:

     .rt-pr-consent--publish            published with the petitioner's name
     .rt-pr-consent--publish-anonymous  published anonymously
     .rt-pr-consent--do-not-publish     declined -> placeholder card

   Those are the only three that can occur: a request whose consent question
   was left unanswered never reaches the widget at all, not even as a
   placeholder. Nothing here styles them on purpose -- add your rules here. */

/* Placeholder card: a request was made on this date, but the petitioner did
   not authorize publishing it, so there is nothing to show. Same .rt-card
   footprint as a real card so the grid and carousel stay even, just quieter
   -- lower contrast and centred, to read as a marker rather than content. */
.rt-pr-card--private {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  color: var(--color_p);
  background: rgb(247 247 247 / 89%);
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-top: 4px solid var(--color_a);
}
.rt-pr-card--private .rt-pr-card__mark {
  opacity: 0.45;
}
/* Both of the placeholder's lines are <p>s, so they need the same
   three-classes-plus-element weight the real card's paragraphs now carry in
   testemonial-widget.css -- see the note there. `color: inherit` hands the
   label back to the card's own colour above, which a host page's `p` rule
   was otherwise repainting. */
.rt-testimonials .rt-card p.rt-pr-card__private-label {
  margin: 0;
  color: inherit;
  font-style: italic;
  opacity: 0.75;
}
/* Ties with the shared stylesheet's own p.rt-card__location on specificity
   and wins on order, this file being the one loaded second (see the header). */
.rt-testimonials .rt-pr-card--private p.rt-card__location {
  margin: 0;
}

/* .btn (main.css) supplies the shape and type; it carries no colour. */
.rt-pr-wall__more {
  display: block;
  width: auto;
  margin: 2rem auto 0;
  padding-left: 2rem;
  padding-right: 2rem;
  border: 0;
  cursor: pointer;
  background: var(--color_p);
  color: var(--white);
}
.rt-pr-wall__more:hover {
  background: var(--color_a);
}
/* The JS hides this button by setting .hidden once every card is on screen.
   That works through the browser's own [hidden]{display:none}, which the
   `display: block` above outranks -- so without this rule the button stays
   visible after the last batch, and does nothing when clicked. Most obvious
   when a month filter is active, since the end arrives after one click. */
.rt-pr-wall__more[hidden] {
  display: none;
}

@media (max-width: 640px) {
  /* 50px a side would leave 260px on a 360px phone, under the 300px minimum
     card width the shared stylesheet sets -- i.e. horizontal overflow. */
  .rt-prayer-requests {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .rt-pr-wall {
    grid-template-columns: 1fr;
  }
}

/* "I will pray for you" -- appended as the last child of .rt-card__meta by
   prayRowHtml() in prayer-request-widget.js. Every selector below is
   scoped .rt-testimonials .rt-card ... rather than the bare class, for the
   same reason p.rt-card__quote is in testemonial-widget.css: a host page's
   own two-class selector (.bg1l.bg-prayersection p, on the prayer-request
   hero) would otherwise outrank a plain one-class rule. See that file's
   comment for the specificity math -- this matches it exactly.

   .rt-card itself is a fixed height: 340px flex column (box-sizing:
   border-box), so this row is not free space: it comes out of
   .rt-card__scroll, the only flex: 1 1 auto child, leaving a slightly
   shorter visible quote before it scrolls. Accepted trade-off -- growing
   .rt-card would also affect the testimonials widget, which shares this
   stylesheet by design. */
.rt-testimonials .rt-card .rt-pr-pray {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.rt-testimonials .rt-card button.rt-pr-pray__btn {
  flex: 0 0 auto;
  font: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 0.45em 0.9em;
  border: 1px solid var(--color_p);
  border-radius: 999px;
  background: transparent;
  color: var(--color_p);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.rt-testimonials .rt-card button.rt-pr-pray__btn:hover:not(:disabled) {
  background: var(--color_p);
  color: var(--white);
}

/* :disabled and .is-prayed are set together (see applyState() in the JS)
   -- :disabled covers the instant a click succeeds, .is-prayed is what
   survives the button being re-rendered afterward, since disabled alone
   would be lost if innerHTML were ever reset without it. */
.rt-testimonials .rt-card button.rt-pr-pray__btn:disabled,
.rt-testimonials .rt-card button.rt-pr-pray__btn.is-prayed {
  cursor: default;
  opacity: 0.7;
  background: var(--color_p);
  color: var(--white);
}

.rt-testimonials .rt-card button.rt-pr-pray__btn.is-pending {
  cursor: progress;
  opacity: 0.55;
}

.rt-testimonials .rt-card span.rt-pr-pray__count {
  flex: 1 1 auto;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72em;
  color: #6b6b6b;
}

/* The explanation of how the button works. A prior :hover tooltip on the
   pray button itself could not be made to render reliably on the live
   embed and was replaced with a permanently visible paragraph -- which then
   turned out to be too much text sitting above every wall. This is now a
   one-line lead (.rt-pr-info__lead) plus a small icon (.rt-pr-info__icon)
   that reveals the full text (.rt-pr-info__tooltip) on *click*, not hover,
   so neither earlier failure mode applies: it isn't CSS-hover-dependent, and
   click has a touchscreen equivalent. buildPrayInfoRow() in
   prayer-request-widget.js builds this row -- the info box plus the month
   filter side by side -- and inserts it where the filter alone used to go,
   in both initWall() and initShardedWall(), so it's wall-only the same way
   the original tooltip was: the carousel never calls either of those. */
.rt-pr-toprow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.rt-pr-info {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #555;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78em;
  line-height: 1.4;
  text-transform: none;
}

.rt-pr-info__lead {
  flex: 0 1 auto;
}

.rt-pr-info__icon {
  flex: 0 0 auto;
  width: 1.3em;
  height: 1.3em;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #555;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1em;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
}

.rt-pr-info__icon:hover,
.rt-pr-info__icon[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.08);
}

.rt-pr-info__tooltip {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.5rem);
  left: 0;
  display: block;
  width: max-content;
  max-width: min(320px, 90vw);
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: var(--white, #fff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* A same-specificity author rule beats the UA stylesheet's own
   [hidden]{display:none} regardless of selector order, so the block
   above -- needed to give the popover its box in the first place --
   silently defeats `tip.hidden = true/false` in the JS unless this is
   spelled out explicitly here too. */
.rt-pr-info__tooltip[hidden] {
  display: none;
}

.rt-pr-info__tooltip-p {
  display: block;
}

.rt-pr-info__tooltip-p + .rt-pr-info__tooltip-p {
  margin-top: 0.6rem;
}

@media (max-width: 640px) {
  .rt-testimonials .rt-card .rt-pr-pray {
    flex-wrap: wrap;
  }
  .rt-testimonials .rt-card span.rt-pr-pray__count {
    text-align: left;
    flex-basis: 100%;
  }
  /* Full width once wrapped, so the icon isn't squeezed into a narrow
     column beside a filter that has already dropped to its own line. */
  .rt-pr-info {
    flex-basis: 100%;
  }
}